<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/raphael.sketchpad.js"></script>
<!--script type="text/javascript" src="js/introani.js"></script-->


<link rel="stylesheet" type="text/css" href="css/modalwindow.css" />


</head>
<body style="background-image:url('images/background/Background_v1.png');" onload="initialize();">
	
	
	
<!--div id="boxes">
<div id="dialog" class="window">
		<div id="Intro_1"><img style="position:absolute;top:0;left:0;" src="images/animation/Intro_1.png" height="480" /></div>
		<div id="Intro_2" style="display: none"><img style="position:absolute;top:10;left:220;" src="images/animation/Intro_2.png" height="100" /></div>
		<div id="Intro_3" style="display: none"><img style="position:absolute;top:100;left:170;" src="images/animation/Intro_3.png" height="100" /></div>
		<div id="Intro_4" style="display: none"><img style="position:absolute;top:180;left:150;" src="images/animation/Intro_4.png" height="100" /></div>
		<div id="Intro_5" style="display: none"><img style="position:absolute;top:230;left:160;" src="images/animation/Intro_5.png" height="260" /></div>
		<div id="Intro_6" style="position:absolute; display:none ;clip: rect(0px, 640px, 760px, 0px);  "><img id="Intro_6_images" style="position:absolute;top:-40;left:-40;" src="images/animation/Intro_Story_1.png" height="560" /></div>
		<div id="Intro_7" style="position:absolute; display:none ;clip: rect(0px, 640px, 760px, 0px);  "><img id="Intro_7_images" style="position:absolute;top:-40;left:-40;" src="images/animation/Intro_Story_2.png" height="560" /></div>
		<div id="Intro_8" style="position:absolute; display:none ;clip: rect(0px, 640px, 760px, 0px);  " onclick="setTutorialStep(0);"><img id="Intro_8_images" style="position:absolute;top:-40;left:-40;" src="images/animation/Intro_Story_3.png" height="560" />
			<img  id="ContinueButton" style="position:absolute;top:400;left:320;" src="images/buttons/Continue_Button.png" height="60" />
		</div>
		<div id="Outro_1" style="position:absolute; display:none ;clip: rect(0px, 640px, 760px, 0px);  "><img id="Outro_7_images" style="position:absolute;top:-40;left:-40;" src="images/animation/Outro_Story_1.png" height="560" /></div>
		<div id="Outro_2" style="position:absolute; display:none ;clip: rect(0px, 640px, 760px, 0px);  "><img id="Outro_8_images" style="position:absolute;top:-40;left:-40;" src="images/animation/Outro_Story_2.png" height="560" /></div>
</div>

<div id="mask"></div>
</div-->




	<div id="mainComponent" >
		<div id="holder"  >
			<!--img id="defaultbg" src="images/background/Background_1.png"-->
			<div id="editor" onclick="pattern(event)" style="position: absolute;left: 70;top: 10;"></div>
		</div>
				<img style="position:absolute;top:10;left:850;" src="images/background/Background_Tray.png" height="600" />

				<div id="sideBar">
				<div id="tools" >
					<br>
					<div style="position:absolute;top:510;left:320; cursor: pointer" id="fillBlue"  onclick="changeShape(this.id)"><a href="#" class="thumbnail"><img id="knife1" class="img-rounded" src="images/icons/Knife_CMU_Blue.png" height="250" ></a></div>
					<div style="position:absolute;top:510;left:150; cursor: pointer" id="fillLGreen"   onclick="changeShape(this.id)"><a href="#" class="thumbnail"><img  id="knife2" src="images/icons/Knife_LGreen.png" height="250"/></a></div>
					<div style="position:absolute;top:510;left:50; cursor: pointer" id="fillPink"  onclick="changeShape(this.id)"><a href="#" class="thumbnail"><img id="knife3" src="images/icons/Knife_Pink.png" height="250"/></a></div>				
					<br /><br /><br />
					<div style="position:absolute;top:510;left:800; cursor: pointer" id="strokeYellow"  onclick="changeStroke('#FBB716',this.id)"  ><a href="#" class="thumbnail"><img id="pipe3" src="images/icons/Pipe_CMU_Yellow.png"  height="200"></a></div>					
					<div style="position:absolute;top:510;left:650; cursor: pointer" id="strokeWhite" onclick="changeStroke('white',this.id)"  ><a href="#" class="thumbnail"><img id="pipe2" src="images/icons/Pipe_White.png" height="200" ></a></div>
					<div style="position:absolute;top:510;left:550; cursor: pointer" id="strokeLBlue" onclick="changeStroke('#ADE0F0',this.id)"  ><a href="#" class="thumbnail"><img id="pipe1" src="images/icons/Pipe_LBlue.png"  height="200" ></a></div>
					<br />
					<div style="position:absolute;top:310;left:900; cursor: pointer"id="sprinkles1" onclick="changePattern(this.id)"  ><a href="#" class="thumbnail"><img id="sprinklePattern1" src="images/icons/sprinkles1.png" width="120"/></a></div>
					<div style="position:absolute;top:410;left:900; cursor: pointer" id="sprinkles2" onclick="changePattern(this.id)"  ><a href="#" class="thumbnail"><img id="sprinklePattern2" src="images/icons/sprinkles2.png" width="120"/></a></div>
					<div style="position:absolute;top:410;left:1100; cursor: pointer" id="sprinkles3" onclick="changePattern(this.id)"  ><a href="#" class="thumbnail"><img id="sprinklePattern3" src="images/icons/sprinkles3.png" width="120"/></a></div>
				</div>
				<br />
				</div>
						
	</div>
	<div id="viewer" ></div>
	<!-- deleted the id=finish -->
				<div >
					<form action="save.php" method="post">
						<input type="hidden" name="data" />
						<input type="submit" style="visibility:hidden" value="Save" />
					</form>
				</div>

				<div style="position:absolute;top:310;left:1100; cursor: pointer" id="Drama_Cookie"  onclick="shapeClick(this.id); "> <img id="dramaCookie" src="images/shape/Drama_Cookie.png"  height="100" /></div>
				<div style="position:absolute;top:210;left:900; cursor: pointer" id="Globe_Cookie"  onclick="shapeClick(this.id); "><img id="globeCookie" src="images/shape/Globe_Cookie.png" height="100"/></div>
				<div style="position:absolute;top:210;left:1100; cursor: pointer" id="Robot_Cookie"  onclick="shapeClick(this.id); "><img id="robotCookie" src="images/shape/Robot_Cookie.png"  height="100"/></div>
				<div style="position:absolute;top:110;left:900; cursor: pointer"id="Scotty_Cookie"  onclick="shapeClick(this.id);"><img id="scottyCookie" src="images/shape/Scotty_Cookie.png"  height="100"></div>
				<div style="position:absolute;top:110;left:1100; cursor: pointer" id="Thistle_Cookie"  onclick="shapeClick(this.id);"><img id="thistleCookie" src="images/shape/Thistle_Cookie.png"  height="100"></div>	
				<div style="position:absolute;top:610;left:1100; cursor: pointer" id="undo"  onclick="undo();"><img src="images/icons/Undo_Button.png" ></div>	
				<div style="position:absolute;top:610;left:900; cursor: pointer" id="clear"  onclick=" clearTray();"><img src="images/icons/Clear_Button.png" ></div>	
				<div style="position:absolute;top:710;left:900; cursor: pointer" id="finish"><img src="images/icons/Finish_Button.png" ></div>	

				<!--div style="position:absolute; top:-100; left:-100;" id="AScotty_Cookie"><img src="images/shape/Scotty_Cookie.png"  height="100"></div-->
				<!--audio loop="loop" autoplay="true">
					<source src="sound/Holiday Card_music_mixdown.mp3">	
				</audio-->
				
				<div id="tutorial0" style="position:absolute;top:200;left:500; cursor: pointer; display: none;"> <label> <img src="images/tutorial/PickCookie_Text.png"/></label></div>
				<div id="tutorial1" style="position:absolute;top:710;left:0; cursor: pointer; display: none;"><label><img src="images/tutorial/IcingColor_Text.png"/></label></div>
				<div id="tutorial2" style="position:absolute;top:710;left:500; cursor: pointer; display: none;"><label><img src="images/tutorial/FrostingColor_Text.png"/></label></div>
				<div id="tutorial3" style="position:absolute;top:600;left:350; cursor: pointer; display: none;"><label><img src="images/tutorial/FrostingDrawing_Text.png"/></label></div>
				<div id="tutorial4" style="position:absolute;top:610;left:800; cursor: pointer; display: none;"><label><img src="images/tutorial/Undo_Text.png"/></label></div>
				<div id="tutorial5" style="position:absolute;top:400;left:500; cursor: pointer; display: none;"><label><img src="images/tutorial/Sprinkles_Text.png"/></label></div>
				<div id="tutorial6" style="position:absolute;top:600;left:350; cursor: pointer; display: none;"><label><img src="images/tutorial/SprinklesDrawing_Text.png"/></label></div>
				<div id="tutorial7" style="position:absolute;top:660;left:550; cursor: pointer; display: none;"><label><img src="images/tutorial/Clear_Finish_Text.png"/></label></div>
				
				<!-- all the audios-->
				<audio id="audio-bg">
					<source src="sound/Holiday Card_music_mixdown.mp3"></source>
					<source src="sound/Holiday Card_music_mixdown.wav" type="audio/wave"></source>
					This Browser doesn't support mp3/ogg formats.
				</audio>
				<audio id="clickSound">
					<source src="sound/click.mp3"></source>
					<source src="sound/click.wav" type="audio/wave"></source>
				</audio>
				<audio id="frostingSound">
					<source src="sound/Frosting.mp3"></source>
					<source src="sound/Frosting.wav" type="audio/wave"></source>
				</audio>
				<audio id="icingSound">
					<source src="sound/icing.mp3"></source>
					<source src="sound/icing.wav" type="audio/wave"></source>
				</audio>
				<audio id="dramaSound">
					<source src="sound/DramaMasks.mp3"></source>
					<source src="sound/DramaMasks.wav" type="audio/wave"></source>
				</audio>
				<audio id="globeSpinSound">
					<source src="sound/Globe_Spin.mp3"></source>
					<source src="sound/Globe_Spin.wav" type="audio/wave"></source>
				</audio>
				<audio id="robotBeepSound">
					<source src="sound/Robot_Beeps.mp3"></source>
					<source src="sound/Robot_Beeps.wav" type="audio/wave"></source>
				</audio>
				<audio id="sealFanfareSound">
					<source src="sound/Seal_fanfare.mp3"></source>
					<source src="sound/Seal_fanfare.wav" type="audio/wave"></source>
				</audio>
				<audio id="dogBarkSound">
					<source src="sound/Dog_Bark.mp3"></source>
					<source src="sound/Dog_Bark.wav" type="audio/wave"></source>
				</audio>
				<audio id="sprinkleSound">
					<source src="sound/Sprinkles.mp3"></source>
					<source src="sound/Sprinkles.wav" type="audio/wave"></source>
				</audio>
				<!--<embed src="sound/Sprinkles.mp3" loop=true autostart="true" hidden="true" height="200" width="500"></embed>-->
				
<script type="text/javascript">
	var patternId;
	var soundEmbed = null;
	var imgName = 'images/shape/';
	var imgFormat = '.png';
	var suffix = '';
	var _cursorFile = '';
	var _draw = false;
	var tutorialArray = new Array();
	$(document).ready(function() {
		setTutorialStep(0);	
	});
	var sketchpad = Raphael.sketchpad("editor", {
		width: 800,
		height: 600,
		editing: true
	});
		sketchpad.setDrawable(false);
		sketchpad.pen().color("yellow");		
		sketchpad.pen().width(15);
		sketchpad.bgImg("images/background/Background_1.png");
	
	$('img').mousedown(function(){ //disable all the drag effect on img 
		return false;
	});
	// When the sketchpad changes, update the input field.
	sketchpad.change(function() {
		$("#data").val(sketchpad.json());
	});
	
	
	$('div').click(function(){
		$('#clickSound')[0].play();
	});
	$('#Drama_Cookie').click(function(){
		$('#dramaSound')[0].play();
	});
	$('#Robot_Cookie').click(function(){
		$('#robotBeepSound')[0].play();
	});
	$('#Scotty_Cookie').click(function(){
		$('#dogBarkSound')[0].play();
	});
	$('#Globe_Cookie').click(function(){
		$('#globeSpinSound')[0].play();
	});
	$('#Thistle_Cookie').click(function(){
		$('#sealFanfareSound')[0].play();
	});
	setInterval(function(){moveSprite('AScotty_Cookie',100,100)},30000);
	
	function initialize(){
		for(i = 0; i < 10; i++){
			tutorialArray[i] = false;
		}
	}
	function undo(){
		sketchpad.undo();	
		setTutorialStep(5);
	}
	
	function addimg(src,x,y){
		$('#sprinkleSound')[0].play();
		sketchpad.addImg(src,x,y,50,50);
		setTutorialStep(7);
	}
	
	function showTutorial(){
		var tutorialStep = getTutorialStep();
		var tutorialId = "tutorial";
		var tutorialElem;
		
			if(tutorialStep != 0){ // if not the first step of tutorial
				tutorialId = "tutorial" + (tutorialStep -1);
				tutorialElem = document.getElementById(tutorialId);
				//tutorialElem.style.display = "none";
				$('#'+tutorialId).fadeOut(1000);
				$('#'+tutorialId).fadeTo('fast', 0.0);
			}
			tutorialId = "tutorial" + tutorialStep;
			//alert(tutorialId);
			tutorialElem = document.getElementById(tutorialId);
			//tutorialElem.style.display = "block";
			$('#' + tutorialId).fadeIn(1500);	
			$('#' + tutorialId).fadeTo("fast",1);	
			for(i = 0; i < 2; i++){
				$('#'+tutorialId).hide(0).delay(100).show(100).delay(100);
			}
			if(tutorialStep == 7){
				$('#'+tutorialId).fadeOut(5000);
				$('#'+tutorialId).fadeTo('fast', 0.0);
			}
		
	}
	
	function getTutorialStep(){
		for(i = 0; i < 9; i++){
			if(!tutorialArray[i])
				return i-1;
		}
	}
	
	function setTutorialStep(step){
		if(tutorialArray[step])
			return;
		if(step != 0){
			
			if(tutorialArray[step - 1])
				tutorialArray[step] = true;
		}else{
			tutorialArray[step] = true;
		}
		showTutorial();
		if(step == 0){
			$('#dramaCookie').attr('src','images/tutorial/Drama_Glow.png');
			$('#globeCookie').attr('src','images/tutorial/Globe_Glow.png');
			$('#robotCookie').attr('src','images/tutorial/Robot_Glow.png');
			$('#scottyCookie').attr('src','images/tutorial/Scotty_Glow.png');
			$('thistleCookie').attr('src','images/tutorial/Thistle_Glow.png');
		}
		if(step == 1){
			$('#dramaCookie').attr('src','images/shape/Drama_Cookie.png');
			$('#globeCookie').attr('src','images/shape/Globe_Cookie.png');
			$('#robotCookie').attr('src','images/shape/Robot_Cookie.png');
			$('#scottyCookie').attr('src','images/shape/Scotty_Cookie.png');
			$('thistleCookie').attr('src','images/shape/Thistle_Cookie.png');
			
			$('#knife1').attr('src','images/tutorial/Knife_CMU_Blue_glow.png');
			$('#knife2').attr('src','images/tutorial/Knife_LGreen_Glow.png');
			$('#knife3').attr('src','images/tutorial/Knife_Pink_Glow.png');
		}
		if(step == 2){
			$('#knife1').attr('src','images/icons/Knife_CMU_Blue.png');
			$('#knife2').attr('src','images/icons/Knife_LGreen.png');
			$('#knife3').attr('src','images/icons/Knife_Pink.png');
			
			$('#pipe1').attr('src', 'images/tutorial/Pipe_LBlue_Glow.png');
			$('#pipe2').attr('src', 'images/tutorial/Pipe_White_Glow.png');
			$('#pipe3').attr('src', 'images/tutorial/Pipe_CMU_Yellow_Glow.png');
		}
		if(step == 3){
			$('#pipe1').attr('src', 'images/icons/Pipe_LBlue.png');
			$('#pipe2').attr('src', 'images/icons/Pipe_White.png');
			$('#pipe3').attr('src', 'images/icons/Pipe_CMU_Yellow.png');
		}
		if(step == 5){
			$('#sprinklePattern1').attr('src','images/tutorial/SprinkleCMUlong_Glow.png');
			$('#sprinklePattern2').attr('src','images/tutorial/SprinkleCMURound_Glow.png');
			$('#sprinklePattern3').attr('src','images/tutorial/SprinkleStar_Glow.png');
		}
		if(step == 6){
			$('#sprinklePattern1').attr('src','images/icons/sprinkles1.png');
			$('#sprinklePattern2').attr('src','images/icons/sprinkles2.png');
			$('#sprinklePattern3').attr('src','images/icons/sprinkles3.png');
		}
	}
	function changeStroke(color,id){
		if(_draw){
			setTutorialStep(3);
			sketchpad.setDrawable(true);
			sketchpad.pen().color(color);		
			sketchpad.pen().opacity(1);		
			sketchpad.pen().width(15);
			checkIcon(id);
			patternId="";
			if(id == 'strokeYellow'){
				_cursorFile = 'images/cursor/Yellow_Pipe.cur';
			}else if(id == 'strokeWhite'){
				_cursorFile = 'images/cursor/White_Pipe.cur';
			}else if(id == 'strokeLBlue'){
				_cursorFile = 'images/cursor/Blue_Pipe.cur';
			}
			
			document.getElementById('mainComponent').style.cursor = "url(" + _cursorFile + "),default"; 
			}
	}
	
	function pattern(e){
		if (patternId){
			addimg("images/icons/"+patternId+".png",e.clientX-100,e.clientY-120);	
		}	
	}
	
	function changePattern(id){
		if(_draw){
			setTutorialStep(6);
				sketchpad.setDrawable(false);
				patternId=id;	
				console.log(patternId);
				_cursorFile = "images/cursor/" + id + ".cur";
				document.getElementById('')
				document.getElementById('mainComponent').style.cursor = "url(" + _cursorFile + "),default"; 
				checkIcon(id);
				sketchpad.pen().opacity(0);		
				
			}
	}
	
	function clearTray(){
		sketchpad.clear();
		_draw = false;
	}
	
	function shapeClick(clicked_id){
		//closeDialog();
		sketchpad.setDrawable(false);
		clearTray();
		suffix = '';
		imgName= 'images/shape/';
		imgName += clicked_id;
		_draw = true;
		setTutorialStep(1);
		originShape(imgName);
	}
	
	function checkIcon(id){
// 				$('#sock').css("background-color","Bisque");
// 				$('#snowflake').css("background-color","Bisque");
// 				$('#redheart').css("background-color","Bisque");
// 				$('#sprinkles1').css("background-color","Bisque");
// 				$('#sprinkles2').css("background-color","Bisque");
// 				$('#sprinkles3').css("background-color","Bisque");
// 				$('#strokeLBlue').css("background-color","Bisque");
// 				$('#strokeYellow').css("background-color","Bisque");
// 				$('#strokeWhite').css("background-color","Bisque");
// 				$('#'+id).css("background-color","#B2A089");
	
	}
	
	function originShape(fillColor){ 
		sketchpad.shapeImg(imgName + imgFormat);
	}
	
	function changeShape(fillColor){
		setTutorialStep(2);
		$('#icingSound')[0].play();	
		if(imgName!=='images/shape/'){
			if(fillColor == 'fillBlue'){
				if(suffix != ''){ // if not the first hit on knives
					suffix = '_Blue_Blank';
				}else if(suffix === ''){
					suffix = '_Blue';
				}
			}
			else if(fillColor == 'fillLGreen'){
				if(suffix != ''){ // if not the first hit on knives
					suffix = '_LGreen_Blank'; 
				}else if(suffix == ''){
					suffix = '_LGreen';
				}
				
			}
			else if(fillColor == 'fillPink'){
				if(suffix != ''){ // if not the first hit on knives
					suffix = '_Pink_Blank'; 
				}else if(suffix == ''){
					suffix = '_Pink';
				}
			}
			sketchpad.shapeImg(imgName + suffix + imgFormat);
		}
	}
	


	
/*	function playSound(soundfile, soundLoop){
		if(!soundEmbed){
			soundEmbed = document.createElement('embed');
			soundEmbed.setAttribute("src", "sound/" + soundfile + ".wav");
			soundEmbed.setAttribute("hidden", true);
			soundEmbed.setAttribute("autostart", true);
			soundEmbed.setAttribute("loop", soundLoop);
			
		}else{
			document.body.removeChild(soundEmbed);
			soundEmbed.removed = true;
			soundEmbed = null;
			soundEmbed = document.createElement('embed');
			soundEmbed.setAttribute("src", "sound/" + soundfile + ".wav");
			soundEmbed.setAttribute("hidden", true);
			soundEmbed.setAttribute("autostart", true);
			soundEmbed.setAttribute("loop", soundLoop);
		}
		
		soundEmbed.removed = false;
		document.body.appendChild(soundEmbed);
		
	}

	function stopSound(){
		if(soundEmbed){
			document.body.removeChild(soundEmbed);
			soundEmbed.removed = true;
			soundEmbed = null;
		}
	}*/

	function moveSprite(id,x,y){
      $("#"+id).animate({ 
        left: x,
		top: y,
      }, 1500, function(){
	     $("#"+id).animate({ 
        left: -200,
		top: -200,
		
      }, 1500 )
	  	  } );
	}
	
	
	window.onload = function(){
		var bgMusic = $('#audio-bg')[0], playing = true;
	//	alert(bgMusic.canPlayType("audio/ogg; codecs=vorbis"));
		bgMusic.addEventListener('ended', function(){
			this.currentTime = 0;
			if(playing){
				this.play();
			}
		}, false);
		
		bgMusic.play();
		
		var frostingSound = $('#frostingSound')[0], frostingPlaying = true;
		frostingSound.addEventListener('ended', function(){
				this.currentTime = 0;
				if(playing){
					this.play();
					}
		}, false);
	};
</script>


</body>